<template>
  <div class="video-test">
    <n-card title="视频播放测试">
              <n-space vertical>
          <n-text>测试 ArtPlayer 视频播放</n-text>

          <!-- 视频链接输入 -->
          <n-card title="输入视频链接测试" size="small">
            <n-space vertical>
              <n-input
                v-model="videoUrl"
                placeholder="请输入视频链接，例如：https://www.w3schools.com/html/mov_bbb.mp4"
                @keyup.enter="playVideo"
              />
              <n-space>
                <n-button @click="playVideo" type="primary">播放视频</n-button>
                <n-button @click="clearVideo" type="warning">清空</n-button>
              </n-space>
            </n-space>
          </n-card>

          <!-- 测试视频 -->
          <div v-if="videoUrl" class="test-video">
            <n-text strong>正在播放: {{ videoUrl }}</n-text>
            <ArtVideoPlayer
              :src="videoUrl"
              :height="300"
            />
          </div>

          <!-- 默认测试视频 -->
          <div v-else class="test-video">
            <n-text strong>默认测试视频</n-text>
            <ArtVideoPlayer
              src="https://www.w3schools.com/html/mov_bbb.mp4"
              :height="300"
            />
          </div>

        <!-- 上传测试 -->
        <n-upload
          :file-list="fileList"
          @update:file-list="handleFileListChange"
          list-type="image-card"
          :max="1"
          :custom-request="customUpload"
          accept="video/*"
        >
          <div class="upload-trigger">
            <n-icon size="48">
              <AddIcon />
            </n-icon>
            <n-text>上传视频测试</n-text>
          </div>
        </n-upload>

        <!-- 上传的视频 -->
        <div v-if="uploadedVideo" class="uploaded-video">
          <n-text strong>上传的视频:</n-text>
          <ArtVideoPlayer
            :src="uploadedVideo"
            :height="300"
          />
        </div>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage } from 'naive-ui'
import type { UploadFileInfo } from 'naive-ui'
import { Add as AddIcon } from '@vicons/ionicons5'
import ArtVideoPlayer from '../../components/talk/ArtVideoPlayer.vue'
import { uploadApi } from '../../api/upload'

const message = useMessage()
const fileList = ref<UploadFileInfo[]>([])
const uploadedVideo = ref<string>('')
const videoUrl = ref<string>('https://cdn.acdog.cn/videos/85b15de810844c9b9986f2cc8d2fac8b.mp4')

const handleFileListChange = (files: UploadFileInfo[]) => {
  fileList.value = files
}

const customUpload = async ({ file }: { file: UploadFileInfo }) => {
  try {
    const fileObj = file.file as File
    console.log('上传视频:', fileObj.name, fileObj.type)

    const result = await uploadApi.uploadVideo(fileObj)
    console.log('上传成功:', result)

    file.url = result.url
    file.status = 'finished'
    uploadedVideo.value = result.url

    message.success('视频上传成功')
  } catch (error) {
    console.error('上传失败:', error)
    file.status = 'error'
    message.error('视频上传失败')
  }
}

// 播放视频
const playVideo = () => {
  if (!videoUrl.value.trim()) {
    message.warning('请输入视频链接')
    return
  }
  message.success('开始播放视频')
}

// 清空视频链接
const clearVideo = () => {
  videoUrl.value = ''
  message.info('已清空视频链接')
}
</script>

<style scoped>
.video-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-video,
.uploaded-video {
  margin: 20px 0;
}

.upload-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}
</style>
